html,body{
overflow-x: hidden;
font-weight: 400;
color: floralwhite;
}
article,section P{font-weight: 300;}


/* .section {
width: 100%;
position: absolute;

-webkit-animation: scrollup 60s infinite linear;
animation: scrollup 60s infinite linear;
animation-delay: 2s;

} */

/*=== 画像の表示エリア ================================= */
.slide {
position: fixed;
bottom: 15%;
bottom:80px;
left: 5%;

overflow   : hidden;
width      : 300px;
height     : 300px;
margin     : auto;
/* background: #fff url('https://source.unsplash.com/420x300/?nature,water') no-repeat center center; */
/* background: #fff url('https://picsum.photos/300/300') no-repeat center center; */
/* background: #fff url('https://placekitten.com/250/250') no-repeat center center; */

/* background: #fff url('../img_d/dog3_200.jpg') no-repeat center center; */

/* background-size: cover; */
border-radius: 5%;
}
/*=== 画像の設定 ======================================= */
.slide img {
display    : block;
position   : absolute;
/* 画像のサイズを表示エリアに合せる */
width      : inherit;
height     : inherit;
opacity    : 0;
cursor: pointer !important;
/* animation  : slideAnime 30s ease infinite; */
}

/*=== スライドのアニメーションを段差で開始する ========= */
/* .slide img:nth-of-type(1) { animation-delay: 0s }
.slide img:nth-of-type(2) { animation-delay: 6s }
.slide img:nth-of-type(3) { animation-delay: 12s }
.slide img:nth-of-type(4) { animation-delay: 18s }
.slide img:nth-of-type(5) { animation-delay: 24s }
*/
/*=== スライドのアニメーション ========================= */
/* @keyframes slideAnime{
0% { opacity: 0 }
5% { opacity: 1 }
20% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
} */

img :hover{cursor: pointer !important;}


P{font-size: 1.2rem;}
@media screen and (max-width:768px){p{font-size: 1.1rem;}}

.marker_b {
background-color: #ff9;}
.marker_bs {
background-color: #777777;}

.marker_green {

background:linear-gradient(transparent 80%, rgb(128, 255, 102) 20%);}
.marker_pink {
background:linear-gradient(transparent 60%, rgb(255, 102, 204,.5) 40%);}

.marker_blue{
background:linear-gradient(transparent 60%, #6cf 60%);
}
.marker_yell{
background:linear-gradient(transparent 60%, #ff9 60%);}
/* .underline_red {text-decoration-line: underline;text-decoration-color:red;} */
.underline_red {text-decoration-line: underline;text-decoration-color:rgb(255, 0, 255,.5);}

.marker {
background:linear-gradient(transparent 90%, rgba(255, 220, 123) 10%);
/* 上の部分で太さを調整 合計で100%になるよう */
display: inline;

/* 背景の繰り返しを停止 */
background-repeat: no-repeat;

/* マーカーの横方向を0にして縮める */
background-size: 0% 10%;

/* マーカーが引かれる速度を指定 */
transition:background-size 3s;
/* background-size: 100% 0.3em; */
}

/* マーカーが引かれる際に付与するクラス */
.marker.on {
/* 横方向を100%にして、マーカーを引く */
background-size: 100% 100%;
}
section p, article p{text-align: left; font-size: 1.3rem !important;}

h2{
/* text-transform: uppercase; */
/* 大文字にする */
font-size: 2rem;
}

@media screen and (max-width:767px) {

h2{
font-size:1.5rem !important;
}
}
.sora{color:#87ABAD;text-shadow: 1px 1px 0  rgb(255, 255, 255,.5);}
/* #scroll-down {
display: none !important;
transition: background-color 0.3s ease, box-shadow 0.3s ease, opacity 0.5s ease;
} */
#scroll-down {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
cursor: pointer;
opacity: 0;
transition: opacity 0.5s ease;
}

#scroll-down.show {
display: inline-block;
opacity: 1;
}

@media screen and (min-width:2000px) {#scroll-down {
position: fixed;
bottom: 50px;
left: 60%;

cursor: pointer;
}}

@media screen and (min-width:1300px) {#scroll-down {
position: fixed;
bottom: 50px;
left: 55% !important;

cursor: pointer;
}}


/* @media screen and (min-width:1300px) {#scroll-down {
position: fixed;
bottom: 50px;
left: 70%;

cursor: pointer;
}}     */

@media screen and (min-width:900px) {#scroll-down {

position: fixed;
bottom: 50px;
left: 75%;

cursor: pointer;
}}
@media screen and (min-width:600px) {#scroll-down {

position: fixed;
bottom: 50px;
right: 7%;

cursor: pointer;
}}

/* #scroll-down {
position: fixed;
bottom: 50px;

right: 20px;
cursor: pointer;
} */

#scroll-down img {
width: 50px;
height: 50px;
}
@media screen and (max-width:560px){#scroll-down { position: fixed;
top: 93%;

right: 20px;
}}

.t-right{text-align: right !important;}
.font01{font-size: .5rem;}
img{max-width: 100%;}
.tip {color: #ff9;} .tip:hover{color: #6cf;}
input {transform: scale(2); font-size: 1.2rem;
}

.start-button {
background-color: #4CAF50; /* 緑色 */
border: none;
color: white;
padding: 5px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.start-button:hover {
background-color: #45a049; /* 濃い緑色 */
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}
.hidden-text {
cursor: pointer;
color: #555;
background: #f2cdd9;
text-decoration: underline;
}


/* .hidden-text {
visibility: hidden;
} */
/* 問題の答えが一時的に消える */

.hidden-text {
cursor: pointer;
color: blue;
text-decoration: underline;
text-shadow: -1px 1px 0 #000;
}
/* ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿テックボックスにテックを入れると消える＿＿＿＿＿＿＿＿＿＿＿＿＿＿ */
.check-hidden-text {
visibility: hidden;
}
/* ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿テックボックスにテックを入れた状態がリロードされたとき復元誰消えたまま＿＿＿＿＿＿＿＿＿＿＿＿＿＿ */

.hidden-text-reload {
visibility: hidden;}
/* --------------------------------------------- */

/* .custom-btn2{position: absolute; top: 50px; left: 60%; background: #000; box-shadow:inset 2px 2px 2px 0px rgb(0, 255, 255); font-size: 15px !important;padding: 5px 12px;}
.custom-btn3{position:absolute;top: 50px;  left:10px; background: #000; box-shadow:inset 2px 2px 2px 0px rgb(255, 145, 0); font-size: 15px !important;padding: 5px 12px; margin-right: 5px;}
.custom-btn4{position:absolute; top:60%; right: 5%; background: #000; box-shadow:inset 2px 2px 2px 0px rgb(255, 145, 0); font-size: 13px !important; margin-left:5px !important; padding: 5px;}
@media screen and (max-width:768px){.custom-btn4{position:absolute; top:50px !important; left: 35%;}} */




.custom-btn2{position: absolute; top: 30px; left: 60%; background: #000; box-shadow:inset 2px 2px 2px 0px rgb(0, 255, 255); font-size: 15px !important;padding: 5px 12px;}
/* クイズtop */
.custom-btn3{position:absolute;top: 30px; left:10px; background: #000; box-shadow:inset 2px 2px 2px 0px rgb(255, 145, 0); font-size: 15px !important;padding: 5px 12px; margin-right: 5px;}
/* ↑ TOP */
.custom-btn4{position:absolute; top:55%; left: 55%; background: #000; box-shadow:inset 2px 2px 2px 0px rgb(255, 145, 0); font-size: 13px !important; margin-left:5px !important; padding: 5px;}
.custom-btn5{position:absolute; top:55%; left: 10px; background: #000; box-shadow:inset 2px 2px 2px 0px rgb(255, 145, 0); font-size: 13px !important; margin-left:5px !important; padding: 5px;}

/* @media screen and (max-width:768px){.custom-btn4{position:absolute; top:100px !important; left: 50%; padding: 5px 12px; min-width: 40px !important;} */
/* .custom-btn5{position:absolute; top:60%; left: 10px; background: #000; box-shadow:inset 2px 2px 2px 0px rgb(255, 145, 0); font-size: 13px !important; margin-left:5px !important; padding: 5px;}
@media screen and (max-width:768px){.custom-btn5{position:absolute; top:100px !important; left: 1%;}}}
*/


/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
.chip-container {
max-width: 90%; /* デバイス幅に応じて全体の横幅を調整 */
left: 5%;
}

.button-grid {
grid-template-columns: repeat(2, 1fr); /* 768px以下でも2列を維持 */
gap: 8px; /* ボタン間の間隔を調整 */
}

.custom-btn7 {
font-size: 13px; /* ボタンテキストを少し小さく */
padding: 8px; /* ボタンのパディングを調整 */
}
}

@media screen and (max-width: 480px) {
.button-grid {
grid-template-columns: 1fr; /* スマホでは1列表示 */
}
}

.custom-btn02{position: absolute; top: 50px; left: 60%;  background: #000; box-shadow:inset 2px 2px 2px 0px  rgb(255, 215, 0);padding: 5px 12px; }
/* クイズtop */
.custom-btn03{position:absolute;top: 50px; left:10px; background: #000;box-shadow:inset 2px 2px 2px 0px rgb(255, 215, 0) ;padding: 5px 12px; margin-right: 5px; }
/* ↑ TOP */
.custom-btn04{position:absolute; top:60%; left: 60%; background: #000; color:#D4AF37; box-shadow:inset 2px 2px 2px 0px rgb(255, 215, 0) }
.custom-btn05{position:absolute; top:60%; left: 10px; background: #000; color:#D4AF37; box-shadow:inset 2px 2px 2px 0px rgb(255, 215, 0); margin-left:5px !important;}
.custom-btn02,.custom-btn03,.custom-btn04,.custom-btn05{
display: flex;
justify-content: center; /* 水平方向の中央揃え */
align-items: center;    /* 垂直方向の中央揃え */
height: 40px;
width: auto; /* 必要に応じて設定 */
padding: 0 10px; /* ボタン内の余白を設定 */
font-size: 16px; /* 必要に応じて文字サイズを調整 */
/* border: 1px solid #ccc;
background-color: #f1f1f1;  */
cursor: pointer; }
.custom-btn04{padding-top:5px}
/*
.line-height や vertical-align は、特に複数行のテキストが入った場合やボタンのデザインに依存してズレが生じることがあります。そのため、Flexboxの方が信頼性が高.



.min40{min-width: 40px !important;} .min60{min-width: 40px !important;}


/* @media screen and (max-width:560px){.custom-btn{position:fixed; top:50% !important; left: 50%;}} */


/* @media screen and (max-width:560px){.custom-btn{position:fixed; top:50% !important; left: 50%;}} */
body {
font-family: Arial, sans-serif, serif;
/* background-color: #f4f4f4; */
color: #333;
text-align: center;
font-size: 1.1rem;
}

/* .quiz-container {
width: 70%;
margin: auto;
background: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin-top: 10px;
margin-bottom: 30px;
} */
.quiz-container {
width: 80%;
/* font-family: Arial, sans-serif, serif; */

max-width: 500px; /* 最大幅を設定 */
margin: auto;
background: rgb(255,255,255);
/* background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 33.333%, rgba(97,84,199,1) 66.666%, rgba(255,255,255,0) 99.999%);
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 33.333%, rgba(97,84,199,.1) 66.666%, rgba(255,255,255,.1) 99.999%); */

/* background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 33.333%, rgb(250, 245, 250,1) 66.666%, rgba(255,255,255,0) 99.999%); */
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 33.333%, rgb(245, 238, 224,.4) 66.666%, rgba(255,255,255,0) 99.999%);
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 33.333%, rgba(245, 238, 224, 0.4) 66.666%, rgba(255,255,255,0) 99.999%);


/* background-size: 300% 300%; */
/* background-position: 0% 100%; */
background-position: 0% 15%;
transition: .5s;

display: flex;
flex-direction: column;
align-items: center; /* 中央に配置 */
justify-content: center;
cursor: pointer;
/* color: #08255f; */
color: #565656;
border-radius: 5%;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin-top: 10px;
margin-bottom: 30px;

}


.logical-container {
width: 80%;
margin: auto;
background: rgb(255,255,255);
/* background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 33.333%, rgba(97,84,199,1) 66.666%, rgba(255,255,255,0) 99.999%);
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 33.333%, rgba(97,84,199,.1) 66.666%, rgba(255,255,255,.1) 99.999%); */

/* background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 33.333%, rgb(250, 245, 250,1) 66.666%, rgba(255,255,255,0) 99.999%); */
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 33.333%, rgb(245, 238, 224,.4) 66.666%, rgba(255,255,255,0) 99.999%);


/* background-size: 300% 300%; */
/* background-position: 0% 100%; */
background-position: 0% 15%;
transition: .5s;
cursor: pointer;
/* color: #08255f; */
color: #565656;
border-radius: 5%;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin-top: 10px;
margin-bottom: 30px;


}





@media screen and (min-width:768px){
.logical-container{width: 80%;
margin: auto;
background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 33.333%, rgb(245, 238, 224,.4) 66.666%, rgba(255,255,255,0) 99.999%);
background-position: 0% 15%;
transition: .5s;
cursor: pointer;
/* color: #08255f; */
color: #565656;
border-radius: 5%;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin-top: 10px;
margin-bottom: 30px;
}}


@media screen and (max-width:768px){
.logical-container{width: 100%;}}

#quizu,.quiz-container:hover,
.logical-container:hover {
/* background-position: 0% 0%; */
/* background-position: 0% 60%;
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 33.333%, rgb(250, 245, 250,1) 66.666%, rgba(255,255,255,0) 99.999%);*/
color: #22407b;


/* background-position: 0% 0%; */
transition: .5s;

}
.logical-container:hover
/* #quizu:hover {
background-position: 0% 0%;
transition: .5s;
color: #555;
} */

form {
display: flex;
flex-direction: column; /* 縦並びにする */
align-items: flex-start; /* 左揃えにする */
width: 100%; /* フォームの幅を100%に */
}


label {
display: flex;
align-items: center;
gap: 10px; /* ラジオボタンとテキストの間隔 */
width: 100%;
}



/* form label {
margin: 10px;
display: block;
font-size: 1.2rem;
text-align: left;
} */

/* label {
display: block;
width: 100%;
text-align: center; /* 選択肢を中央揃え *
margin: 5px 0;
} */

.quiz-container h1{line-height: 2!important; text-align: left !important; margin-bottom: 10px; }
button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 20px;

display: block;
margin: 10px auto;


}

button:hover {
background-color: #0056b3;
color: #ff9!important;
}




.title5 h2 {
position: relative;
border-top: solid 2px #ff6363;
border-bottom: solid 2px #ff6363;
background: #f4f4f4 !important;
/* background: #f7f7f7;
background: #ece8e8; */
line-height: 1.4;
font-size: 1.3rem;
padding: 0.4em 0.5em;
/* margin: 2em 0 0.5em; */
margin: 4em 0 1em;
text-align: center;

}

.title5 h2:after {
/*タブ*/
position: absolute;
font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
font-weight: 900;

content: 'payment';
background: #ff6363;
/* color: #fff; */
left: 0px;
bottom: 100%;
}
.title5 h2 {
position: relative;
border-top: solid 2px #ff6363;
/* background: #f4f4f4;
background: #f7f7f7;
background: #96d5dd; */
background: #ff6363;

}

.title5 h2:after {
/*タブ*/
position: absolute;
font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
font-weight: 900;
/* content: '\f0a7\ POINT'; */
content: 'Qizu';
}


table {
width: 100%;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
font-size: 1.1rem;
}

th, td {
border: 1px solid #ddd;
padding: 5px 10px;
text-align: left;
}

th {
background-color: rgb(76, 175, 80,.5);
color: white;
}

tr:nth-child(even) {
background-color: rgb(242, 242, 242,.2);
}

th hover, td:hover {
background-color: #ddd;
color: #333;
text-shadow: none;

}


.tableCaption table {
width: 100%;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
font-size: 1.1rem;

background: rgba(255, 255, 255, 0.8); /* 透明感のある白 */
color: #444;
/* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); */

text-shadow: 1px 1px 3px rgba(139, 69, 19, 0.6), 0px 0px 5px rgba(255, 215, 0, 0.5);
/* text-shadow: 1px 1px 3px rgba(128, 128, 128, 0.6), 0px 0px 5px rgba(255, 255, 255, 0.8); */
border-radius: 5px;
background-color: rgb(240, 240, 240,.95);
/* box-shadow: 2px 2px 4px rgba(100, 75, 50, 0.6);
0 0 5px #fff,
0 0 10px #fff,
0 0 20px #fff,
0 0 40px #0ff,
0 0 80px #0ff,
0 0 90px #0ff,
0 0 100px #0ff,
0 0 150px #0ff; */


box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.6);
}


/*
background-color: #f0f0f0;
box-shadow:
0 0 10px rgba(255, 255, 255, 0.6),
0 0 20px rgba(255, 255, 255, 0.4),
0 0 30px rgba(255, 255, 255, 0.2);
}
*/

/* .box {
background-color: #fff;
box-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 20px #fff,
0 0 40px #0ff,
0 0 80px #0ff,
0 0 90px #0ff,
0 0 100px #0ff,
0 0 150px #0ff;
} */



.tableCaption th, .tableCaption td {
border: 1px solid #ddd;
padding: 5px 10px;
text-align: left;


}

.tableCaption th {
/* background-color: rgb(76, 175, 80,.5); グリーン系*/
/* 明るい感じのブルー */
/* background-color: rgb(0, 191, 255,0.9); */
/* background: linear-gradient(to bottom, #FFA500 0%, #FF8C00 50%, #FF4500 100%);
background: linear-gradient(to bottom, #FFD180 0%, #FFA500 50%, #FF8C00 100%); */

background: linear-gradient(45deg, rgb(255, 165, 0,0.7) 0%, rgb(255, 140, 0,0.7) 50%, rgb(255, 69, 0,0.5) 100%);

/* display: flex;
justify-content: center; */
align-items: center;
color: white;
text-align: center;
letter-spacing: 5px; /* さらにゆったり感を出す */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

padding: 5px 20px;  /* 余白*/
}

.tableCaption tr:nth-child(even) {
background-color: rgb(242, 242, 242,.2);
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2) !important;

}

.tableCaption th hover, .tableCaption td:hover {
background-color: #ddd;
color: #333;
/* text-shadow: 1px 1px 3px rgba(139, 69, 19, 0.6), 0px 0px 5px rgba(255, 215, 0, 0.5);
text-shadow: 1px 1px 3px rgba(128, 128, 128, 0.6), 0px 0px 5px rgba(255, 255, 255, 0.8); */
text-shadow: 1px 1px 3px rgba(139, 69, 19, 0.7), 0px 0px 7px rgba(255, 215, 0, 0.5) !important;




}



.tableCaption tr:nth-child(even) {
background: rgba(245, 238, 224, 0.4); /* 交互に温かみのある白 */
text-shadow: 2px 2px 4px rgba(100, 75, 50, 0.6);


}


/* ボタンのスタイル */
.btnToggle {
display: inline-block;
padding: 10px 20px;
font-size: 1.3rem;
color: #fff;
/* background-color: #007bff; /* ブル */
background-color: #259928;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
z-index: 1000;

background-color: #FFA500; /* プルシアンブルー */

color: #f0f0f0; /* ややグレーがかった白文字 */
/* text-shadow:1px 1px 0 #bc760680; */text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

}

.btnToggle:hover {
/* background-color: #0056b3; /* ダークブルー * */
background-color: #4bc451;
background-color: #D4AF37;
color: ;
/* color: orangered; */
box-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
0 0 20px rgba(255, 255, 255, 0.6),
0 0 30px rgba(255, 255, 255, 0.4);
/* text-shadow: 0 0 5px white, 0 0 10px white; */
/* outline: none; */

}


/* レスポンシブ対応 */
@media screen and (max-width:600px){
table {width: 90%;}
table th, table td {
padding: 10px; /* モバイルでの余白調整 */
font-size: 1rem; /* 小さい画面向けに文字サイズを縮小 */
}

.table-container {
padding: 10px; /* コンテナの内側余白を調整 */
}

.btnToggl {
font-size: 1rem; /* ボタンサイズを調整 */
padding: 8px 15px;
}
}

.container-fluid h2{font-size: 2rem !important;}
@media screen and (max-width:768px){.container-fluid h2{font-size: 1.8rem !important;}}
/* article.box020 a{color: #555 !important;}
article.box020:hover,section .box020:hover{color: #555 !important;}
article.box020 :focus,section .box020 :focus{color: #555 !important;}
article .box020 :focus{color: #555 !important;}
#quize:hover{color: #555 !important;}
#quize  :focus{color: #555 !important;}  */

.popup {
display: none;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background: white;
border: 1px solid #ccc;
transition: all ease-out 0.6s;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
font-size: 18px; /* フォントサイズを指定 */
z-index: 10;
}
.popup.visible {
display: block;
}
.popup button {
margin-top: 10px;
}

@keyframes rotateInUpLeft {
from {
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}

to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}

.popup.closing {
animation: slideUp 0.5s forwards;
}




@keyframes slideUp {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-100%);
}
}

footer p{font-weight: 400;}
@media screen and (min-width:768px){footer p{transform: translateX(35%);}}


.fancybutton2{
/* background-color: #259928; */
background-color: #00BFFF;

border: none;
color: white;
padding: 2px 20px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.fancybutton2:hover {
/* background-color: #4bc451; 濃い緑色 */

background-color: #40E0D0;
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}
.font20rem{font-size: 2rem;}

/* .quiz-container {background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 33.333%, rgba(245,238,224,0.4) 66.666%, rgba(255,255,255,0) 99.999%);
} */




/* 一覧表のコンテナ */
.tableCaption {
display: none; }/*
margin-top: 20px;
padding: 15px;
background-color: #f9f9f9; /* 薄いグレー
border: 1px solid #ddd; /* 薄い枠線 *
border-radius: 5px;
font-size: 1rem;
color: #333; /* ダークグレーの文字色 *
}

/* 一覧表内のテキストや要素のスタイル *
.tableCaption p {
margin: 0;
padding: 5px 0;
line-height: 1.6;
}
*/

.sian{color: #017afc;}

    .tableCaption h2{position: relative;
        border-top: solid 2px #007BFF;
        /* background: #f4f4f4;
        background: #f7f7f7;
        background: #96d5dd; */
        background: #00BFFF;
        line-height: 1.4;
        padding: 0.4em 0.5em;
        /* margin: 2em 0 0.5em; */
        margin: 4em 0 1em;
        font-size: 1.5rem;
    }